<template>
  <el-row :gutter="1" class="item">
    <el-col :span="12">
      <div class="key">
        {{ label }}
      </div>
    </el-col>
    <el-col :span="12">
      <div class="value">
        <slot></slot>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: ["label"],
};
</script>
<style lang="scss" scoped scoped>
.item {
  padding: 2px;
  .key {
    color: rgba(0, 0, 0, 0.85);
    background-color: #fafafa;
    font-size: 14px;
    line-height: 1.5;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .value {
    color: #ffffff;
    font-size: 16px;
    border: 1px solid #ffffff;
  }
}
</style>
